.flop {
  width: 100%;
  display: flex;
  align-items: center;
  ul {
    display: inline-block;
    height: var(--flop-height);
    text-align: center;
    list-style: none;
    li {
      float: left;
      min-width: var(--flop-height);
      height: var(--flop-height);
      text-align: center;
      background: var(--flop-item-bg);
      box-shadow: var(--flop-item-shadow);
      border-radius: 4px;
      background-size: 100% 100%;
      margin-right: 4px;
      border: var(--el-border);
      &:last-child {
        margin-right: 0;
      }
      .flop-data-boc {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        .flop-data-boc-num {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          span {
            width: 100%;
            height: 100%;
            line-height: var(--flop-height);
            float: left;
            text-align: center;
            font-size: var(--flop-font-size);
            color: var(--flop-font-color);
          }
        }
      }

      .flop-unit {
        line-height: var(--flop-height);
        color: var(--flop-unit-font-color);
        font-size: var(--flop-unit-font-size);
      }
    }
    .flop-unit-li {
      width: auto;
      padding-left: 5px;
      padding-right: 5px;
    }
  }
}
